<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2022/6/23
  Time: 9:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品详细</title>
    <link href="/Web_css/Product_details.css" rel="stylesheet" type="text/css"/>
    <script src="/Web_page/JQuery.min.js"></script>
    <script src="/Web_js/Product_details.js" language="JavaScript" type="text/javascript"></script>
    <script src="/Web_page/Vue.js"></script>
    <script src="/Web_oop/Oop.js"></script>
    <style>
        .addshopping_border{
            margin-top: 30px;
            margin-left: 50px;
            width: 300px;
            height: 50px;
            border: 1px solid #FF6700;
            background-color: #FF6700;
            text-align: center;
        }
        .addshopping_Cart{
            font-size: 18px;
            color: #ffffff;
            text-decoration: none;
            display: block;
            padding-top: 10px;
            padding-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="body">
    <jsp:include page="page_Header.jsp" flush="true"></jsp:include>
    <jsp:include page="introduce.jsp" flush="true" ></jsp:include>
    <div class="layer_Cover">
        <div class="product_Listing_Options" >
            <div class="product_Title">
                <span class="product_Name">null</span>
            </div>
            <div class="other_Product">
                <ul>
                    <li><a>概述页</a></li>
                    <li><span>|</span></li>
                    <li><a>参数页</a></li>
                    <li><span>|</span></li>
                    <li><a>F码通道</a></li>
                    <li><span>|</span></li>
                    <li><a>咨询客服</a></li>
                    <li><span>|</span></li>
                    <li><a>用户评价</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="yes_no_Login" >
        <div class="login">
            <div class="login_Content">
                <span>为方便您购买，请提前登录<a href="/login">立即登录</a></span>
            </div>
            <div class="login_Img">
                <img src="/Web_img/×.png" onclick="login_None()">
            </div>
        </div>
    </div>
    <%
        String size = String.valueOf(request.getAttribute("size_Img"));
        int sizeInt = Integer.parseInt(size);
        request.setAttribute("size",sizeInt);
    %>
    <div class="commodity">
        <div class="product_Carousel">
            <img src="/Web_img/carousel_left_%23000.png" class="carousel_Left direction_Img" onclick="carousel_Left()">
            <div class="carousel_Imgs">
                <c:forEach var="i" end="${size}" begin="1">
                    <div class="carousel_Img" style="display: block">
                        <img src="/Web_img/Xiaomi_cell_phone${i}.png" class="exhibit_Img">
                    </div>
                </c:forEach>
                <div class="choose">
                    <c:forEach var="i" end="${size}" begin="1">
                        <div class="fixed" state="false" onclick="correspond(this)" subscript="${i}" >
                        </div>
                    </c:forEach>
                </div>
            </div>
            <img src="/Web_img/carousel_right_%23000.png" class="carousel_Right direction_Img" onclick="carousel_Right()">
        </div>
        <div class="product_Desciption">
            <div class="desciption_Name">
                <span class="desciption_Text">Redmi 10A</span>
            </div>
            <ul class="welfare">
                <a>「<li>叠加北京绿色节能消费券立减50元；赠 Keep 会员7天体验卡；赠小米移动流量卡</li>」</a>
                <li class="introduction"></li>
            </ul>
            <div class="self_Operated">
                <span title="企业名称：小米通讯技术有限公司
企业执照注册号：91110108558521630L
企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
企业电话：400-100-5678
营业期限：2010年08月25日 至 2040年08月24日
经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）">小米自营</span>
            </div>
            <div class="price">
                <span class="price_Text">699</span><a>元</a>
            </div>
            <div class="desciption_Fill">

            </div>
            <div class="default_Address">
                <div class="default_Address_Img">
                    <img src="/Web_img/front_page_img30.webp">
                    <span class="abbreviated_address">
                        省级
                    </span>
                    <span class="abbreviated_address">
                         市级
                    </span>
                    <span class="abbreviated_address">
                         区县
                    </span>
                    <span class="abbreviated_address">
                         街道
                    </span>
                    <a onclick="change_Address()" class="addrevise" href="/login">修改</a>
                </div>
                <div class="stock">
                    <span>有现货</span>
                </div>
            </div>
            <div class="add_Shopping">
                <div class="addshopping_border">
                    <a class="addshopping_Cart">加入购物车</a>
                </div>
            </div>
            <div class="other_Assure">
                <img src="/Web_img/success_%23000.png"><span>小米自营</span>
                <img src="/Web_img/success_%23000.png"><span>小米发货</span>
                <img src="/Web_img/success_%23000.png"><span>7天无理由退货</span>
                <img src="/Web_img/success_%23000.png"><span>运费说明</span>
                <img src="/Web_img/success_%23000.png"><span>企业信息</span>
                <img src="/Web_img/success_%23000.png"><span>7天价格保护</span>
            </div>
        </div>
    </div>
    <script>
        denone()
        state_Hange()
    </script>
    <div class="price_Description">
        <div class="price_Description_Title">
            <span>价格说明</span>
        </div>
        <div class="price_Description_Content">
            <img src="/Web_img/Product_details.png">
        </div>
    </div>
    <jsp:include page="footer.jsp" flush="true"></jsp:include>




    <!-- 隐藏部分 -->
    <div class="hint" style="display: none" >
        <div class="blinded">
        </div>
        <div class="hint_Revise">
            <div class="hint_Title">
                <span class="change_Address_Title">修改地址</span><img src="/Web_img/×.png" onmouseover="show_Imgred()" onmouseout="disappear_Img()" class="hint_Img">
            </div>
            <div style="display: inline-flex;">
                <div class="revise_Name">
                    <span class="name_Title">姓名</span>
                    <input type="text" class="name" onfocus="name_Up()" onblur="name_Down()" value="" name="name">
                </div>
                <div class="revise_Name">
                    <span class="phone_Title">手机号</span>
                    <input type="text" class="phone_Number" onfocus="phone_Up()" onblur="phone_Down()" value="" name="phone_Number">
                </div>
            </div>
            <div class="address">
                <div class="edit_Address">
                    <span class="address_Word">省级  市级  区县  区域</span><img src="/Web_img/Shopping_cart_2.png" class="address_Img">
                </div>
            </div>
            <div class="address_Text">
                <span class="address_Character">详细地址</span>
                <textarea name="description" class="specific_address" onfocus="address_Up()" onblur="address_Down()"></textarea>
            </div>
            <div class="label">
                <span class="label_Word">地址标签</span>
                <input type="text" class="address_Label" onfocus="label_Up()" onblur="label_Down()">
            </div>
            <div class="operate">
                <a class="confirm">确认</a> <span class="cancel">取消</span>
            </div>
            <div class="region_selection">
                <div>
                    <img src="/Web_img/×.png" class="remove_Img">
                </div>
                <div class="show_Selected_Regions">
                    <span class="province" onclick="provinces_Show()">选择省份/自治区</span>
                    <span class="city" style="display: none;margin-left: 10px;">选择城市/地区</span>
                    <span class="districts_Counties" style="display: none;margin-left: 10px;">选择区县</span>
                    <span class="delivery_Area" style="display: none;margin-left: 10px;">选择配送区域</span>
                </div>
                <div class="selected_Regions">
                    <a class="area" onclick="area(this)">北京</a><a class="area" onclick="area(this)">天津</a>
                    <a class="area" onclick="area(this)">河北</a><a class="area" onclick="area(this)">山西</a>
                    <a class="area" onclick="area(this)">内蒙古</a><a class="area" onclick="area(this)">辽宁</a>
                    <a class="area" onclick="area(this)">吉林</a><a class="area" onclick="area(this)">黑龙江</a>
                    <a class="area" onclick="area(this)">上海</a><a class="area" onclick="area(this)">江苏</a>
                    <a class="area" onclick="area(this)">浙江</a><a class="area" onclick="area(this)">安徽</a>
                    <a class="area" onclick="area(this)">福建</a><a class="area" onclick="area(this)">江西</a>
                    <a class="area" onclick="area(this)">山东</a><a class="area" onclick="area(this)">河南</a>
                    <a class="area" onclick="area(this)">湖北</a><a class="area" onclick="area(this)">湖南</a>
                    <a class="area" onclick="area(this)">广东</a><a class="area" onclick="area(this)">广西</a>
                    <a class="area" onclick="area(this)">海南</a><a class="area" onclick="area(this)">重庆</a>
                    <a class="area" onclick="area(this)">四川</a><a class="area" onclick="area(this)">贵州</a>
                    <a class="area" onclick="area(this)">云南</a><a class="area" onclick="area(this)">西藏</a>
                    <a class="area" onclick="area(this)">陕西</a><a class="area" onclick="area(this)">甘肃</a>
                    <a class="area" onclick="area(this)">青海</a><a class="area" onclick="area(this)">宁夏</a>
                    <a class="area" onclick="area(this)">新疆</a>
                </div>
                <div class="position">
                    <a class="rapid_Positioning">快速定位></a>
                </div>
            </div>
        </div>
    </div>
    <a class="id" style="display: none">
        ${commodityid}
    </a>
</div>
<script>
    var url = window.location.href
    var split = url.split("name");
    if (decodeURI(split[1]) != "=登陆"){
        var yes_no_Login = document.getElementsByClassName("yes_no_Login")
        yes_no_Login[0].style.display = "none";
    }
    var name = "${commodity_Name}"
    var namearr = name.split(',')
    var product_Name = document.getElementsByClassName("product_Name")
    product_Name[0].innerText = namearr[0]+"      "+namearr[1]
    var desciption_Text = document.getElementsByClassName("desciption_Text")
    desciption_Text[0].innerText = namearr[0];
    var price = "${commodity_Price}";
    var price_Text = document.getElementsByClassName("price_Text")
    price_Text[0].innerText = parseInt(price)
    var introduction = document.getElementsByClassName("introduction")
    var commodity_Details = "${commodity_Details}";
    introduction[0].innerText = ""+commodity_Details.replace(/,/, '|')
    var commodity_Ping = "${commodity_Ping}"
    var imgarr = commodity_Ping.split(",");
    var exhibit_Img = document.getElementsByClassName("exhibit_Img");
    for (let i = 0; i < imgarr.length; i++) {
        if (imgarr[i].trim() != ""){
            exhibit_Img[i].src = imgarr[i]
        }
    }

    var addrevise = document.getElementsByClassName("addrevise")
    var address = "${address}"
    if (address.trim() != ""){
        for (let i = 0; i < 2; i++) {
            address = address.replace("[","")
            address = address.replace("]","")
        }
        var addressarr = address.split(",")
        addrevise[0].removeAttribute("href")
        if (addressarr[0] != ""){
            var abbreviated_address = document.getElementsByClassName("abbreviated_address");
            abbreviated_address[0].innerText = addressarr[4]
            abbreviated_address[1].innerText = addressarr[5]
            abbreviated_address[2].innerText = addressarr[6]
            abbreviated_address[3].innerText = addressarr[7]

            var nameelement = document.getElementsByClassName("name")
            var phone_Number = document.getElementsByClassName("phone_Number")
            var specific_address = document.getElementsByClassName("specific_address")
            var address_Label = document.getElementsByClassName("address_Label")
            nameelement[0].value = addressarr[2]
            phone_Number[0].value = addressarr[3]
            specific_address[0].value = addressarr[8]
            address_Label[0].value = addressarr[9]
            var address_Word = document.getElementsByClassName("address_Word");
            address_Word[0].innerHTML = addressarr[4]+"  "+addressarr[5]+"  "+addressarr[6]+"  "+addressarr[7]
            name_Up();
            phone_Up();
            address_Up();
            label_Up();
        }else{
            var change_Address_Title = document.getElementsByClassName("change_Address_Title")
            var addrevisedocument = document.getElementsByClassName("addrevise");
            addrevisedocument[0].innerText = "添加"
            change_Address_Title[0].innerText = "添加地址"
        }
    }else{
        addrevise[0].setAttribute("onclick","invalid()")
        var addshopping_Cart = document.getElementsByClassName("addshopping_Cart")
        addshopping_Cart[0].href = "/login"
        var addrevise = document.getElementsByClassName("addrevise")
        addrevise[0].innerText = "添加"
        var yes_no_Login = document.getElementsByClassName("yes_no_Login")
        yes_no_Login[0].style.display = "inline-flex"
    }
</script>
</body>
</html>
